<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .arrow {
            border: solid black;
            border-width: 0 8px 8px 0;
            display: inline-block;
            padding: 8px;
        }

        .right {
            transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
        }
        .left {
            transform: rotate(135deg);
            -webkit-transform: rotate(135deg);
        }
        .up {
            transform: rotate(-135deg);
            -webkit-transform: rotate(-135deg);
        }
        .down {
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }
    </style>
</head>

<body>

    <h2>CSS Arrows</h2>
    <p>  root   <i class="arrow"></i></p>
    <hr>
    <p>Right arrow: <i class="arrow right"></i></p>
    <p>Left arrow: <i class="arrow left"></i></p>
    <p>Up arrow: <i class="arrow up"></i></p>
    <p>Down arrow: <i class="arrow down"></i></p>

    <pre>
    <h2>

        箭头:

        必知必会 

        .arrow {
            border: solid black;
            border-width: 0 8px 8px 0;
            display: inline-block;
            padding: 8px;
        }

        .right {
            transform: rotate(-45deg);
            -webkit-transform: rotate(-45deg);
        }
        .left {
            transform: rotate(135deg);
            -webkit-transform: rotate(135deg);
        }
        .up {
            transform: rotate(-135deg);
            -webkit-transform: rotate(-135deg);
        }
        .down {
            transform: rotate(45deg);
            -webkit-transform: rotate(45deg);
        }


    </h2>
    </pre>

</body>

</html>